<template>
    <div class="routeinfoDialog">
        <Cdialog :title="routeTitle" :width="'420'" :visible="showDialog" @closeDialog="changeVisible" :bubble="true"
            :showTitle="false">
            <div class="dialog-content">
                <div class="info-title fs18">
                    <div class="titleName">
                        {{ infoTitle }}
                    </div>
                    <div class="more" @click="toPath" v-if="routeInfo.path">
                        more
                        <el-icon>
                            <ArrowRightBold />
                        </el-icon>
                    </div>
                </div>
                <div class="info-box">
                    <div class="info-item fs16" v-for="(item, index) in infoList">
                        <span class="text ">{{ item.name }}：</span>{{ item.value }}
                    </div>
                </div>
            </div>
        </Cdialog>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { useRouteInfoStore } from '@/stores/routeInfo'
import { useRouter } from 'vue-router';
const routeInfo = useRouteInfoStore()

const router = useRouter()

const showDialog = computed(() => {
    return routeInfo.$state.showDialog
})
const routeTitle = ref('')

const infoList = computed(() => {
    return routeInfo.$state.info
})

const infoTitle = computed(() => {
    return routeInfo.$state.title
})

const changeVisible = () => {
    routeInfo.SetShowDialog(false)
}
const toPath = () => {
    router.push(routeInfo.path)
    changeVisible()
}
onMounted(() => {

})
</script>

<style scoped lang="scss">
.info-title {
    color: whitesmoke;
    margin-bottom: 16px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;

    .more {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
}

.info-box {
    width: 100%;
    display: flex;
    flex-direction: column;



    .info-item {
        margin-bottom: 12px;

        .text {
            color: rgba(111, 186, 255, 1);
        }
    }
}
</style>